<template>
	<view class="search">
		<musichead :toshow="true" title="搜索" color="white"></musichead>
		<!-- 搜索框 -->
		<view class="search-area" >
			<text class="iconfont icon-sousuo"></text>
			<input @input="startSearch(searchValue)" @confirm="toSearch(searchValue)" v-model="searchValue"  type="text" placeholder="搜索歌曲"  >
			<text @click="clearValue" v-if="searchValue.length!=0" class="iconfont icon-close"></text>
		</view>
		
			<scroll-view  scroll-y="true"  class="scroll-container" :style="{height: `${screenHeight}`}">
				
				<!-- 搜索默认页面 -->
				<view v-if="whichOne == 1">
					<view v-if="hotList.length == 0">
						<m-for-skeleton
								margintop="40px"
								 :avatar="false"
						         :avatarSize="200"
								 :title="true"
						         :row= 11
								 :titleStyle="{}"
						         isarc='square'
						         v-for="(item,key) in 1"
						         :key="key">
						</m-for-skeleton>
					</view>
					<view v-else>
						<!-- 搜索记录部分 -->
						<view v-if="hotList.length != 0" class="search-history" >
							<view class="search-history-head">
								<text>历史记录</text>
								<text @tap="clearHistory" class="iconfont icon-shanchu"></text>
							</view>
							<view class="search-history-content">
								<view @tap="searchThis(item)" v-for="(item, index) in searchHistory" :key="index"><text>{{ item }}</text></view>
								
							</view>
						</view>
						
						<!-- 热搜榜 -->
						<view class="hot-search">
							<view class="hot-search-head">热搜榜</view>
							<view @tap="searchTouchWord(item.searchWord)" class="hot-search-item" v-for="(item, index) in hotList" :key="index">
								<view>{{index+1}}</view>
								<view><text>{{item.searchWord}}</text><image :src="item.iconUrl" mode=""></image></view>
								<view>{{item.score}}</view>
							</view>
						</view>
							
					</view>

				</view>
				
				<!-- 搜素预览页面 -->
				<view v-if="whichOne == 2">
					<view class="curren-search">搜索“{{searchValue}}”</view>
					
					<view @tap="searchTouchWord(item.name)" class="preview-item" v-for="(item, index) in searchResult" :key="index">
						<text class="iconfont icon-sousuo"></text>
						<text>{{item.name}}</text>
					</view>
				</view>
				
				<!-- 搜索结果页面 -->
				<view v-if="whichOne == 3">
					<view class="search-result-content">
						<view @tap="playSearch(item.id)" class="search-result-item" v-for="(item, index) in searchResult" :key="index">
							<view>
								<view>{{item.name}}</view>
								<view>{{item.artists[0].name}} - {{item.album.name}}</view>
							</view>
							<view><text  class="iconfont icon-16  icon-icon_bofang"></text></view>
						</view>
						
					</view>
				</view>
			</scroll-view>

	</view>
</template>

<script>
	import musichead from "../musichead/musichead.vue"
	// import debounce from "../../common/utils/index.js"
	import db from '../../common/music-api.js'
	
	// 导入骨架屏组件
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	
	
	export default {
		name:"search",
		data() {
			return {
				searchValue: '',
				searchHistory: [], //搜索历史记录
				hotList: [], //热搜榜
				searchResult: [], //搜索结果
				whichOne: 1,
				screenHeight:0,
			};
		},
		components: {
			mForSkeleton,
		},
		
		watch:{
			searchValue(newValue, oldValue) {
				if(newValue.length == 0) {
					this.whichOne = 1
				}
			}
		},
		methods: {
			// inputVaule(event) {
			// 	this.searchValue = event.target.value
				
			// },
			clearValue() {
				this.searchValue = ''
				
				console.log(this)
				this.whichOne = 1
			},
			
			//搜索方法
			 toSearch(value) {
				console.log(this)
				console.log(`搜索${value}`)
				
				
				//获取搜索数据
				db.searchKeyWord(value).then(result => {
					console.log(result)
					this.searchResult = result.data.result.songs || {}
				})
				
				this.searchHistory.unshift(value)
				//数组去重
				this.searchHistory = [...new Set(this.searchHistory)]
				if(this.searchHistory.length >= 10) {
					this.searchHistory.length = 10
				}
				
				//搜索记录换成到本地
				uni.setStorage({
					key:"searchHistory",
					data:this.searchHistory
				})
				
				
				this.whichOne = 3
			},
			//清除历史记录
			clearHistory() {
				this.searchHistory = []
				
				this.whichOne = 1
				uni.removeStorage({
					key:"searchHistory",
					success() {
						console.log("清除本地缓存数据")
					}
				})
			},
			//搜索历史记录
			searchThis(value) {
				this.searchValue = value
				this.toSearch(this.searchValue)
			},
			//点击热搜榜的词
			searchTouchWord(value){
				this.searchValue = value
				this.toSearch(value)
			},
			//获取搜索结果数据
			getResult(value) {
				
			},
			//防抖处理
			
			
			//输入框输入事件
			startSearch(value) {
				function debounce(fun, delay=4000) {
					let timer = null
					
					return function (...args) {
						if(timer) clearTimeout(timer)
						timer = setTimeout(() => {
							fun.apply(this, args)
						},delay)
					}
				}
				
				console.log("输入文字类")
				this.whichOne = 2
				// let tempFun = db.searchKeyWord
				db.searchKeyWord(value).then(result => {
					console.log(result)
					if(result.data.code != 400) {
						this.searchResult = result.data.result.songs
					}
				})
				
				
			},
			//发送播放音乐事件
			playSearch(songId){
				//跳转到歌曲播放详情页
				uni.navigateTo({
					url: '../../pages/songdetail/songdetail?songId='+songId
				})
			}
			
			
		},
		onLoad() {
			//从本地缓存获取搜索历史记录
			uni.getStorage({
				key:"searchHistory",
				success:(res) => {
					
					this.searchHistory = res.data
					
					console.log(res)
				}
			})
			console.log(this)
			//获取热搜榜数据
			db.getHotList().then(res => {
				this.hotList = res.data.data
			})
		},
		created(){
			
			uni.getSystemInfo({
				success:(res) => {
					this.screenHeight = `${this.$store.getters.canScrollHeight - 60}px`
					console.log("可滚动高度是:" + this.screenHeight)
					
				}
			})
		},
		
	}
</script>

<style scoped>
	.search {
		
		height: 100%;
		
	}
	.search-area {
		position: relative;
		color: rgba(0,0,0,.4);
		padding: 0 10px;
		margin: 10px 0;
		
	}
	.search-area .icon-sousuo {
		position: absolute;
		top: 24rpx;
		left: 40rpx;
		
	}
	
	.search-area .icon-close {
		position: absolute;
		z-index: 13;
		font-size: 60rpx;
		top: 10rpx;
		right: 40rpx;
	}
	.search-area input{
		box-sizing:border-box;
		width: 100%;
		padding-left: 35px;
		height: 40px;
		line-height: 40px;
		outline-style: none;
		background-color: rgba(0,0,0,0.08);
		border-radius: 20px;
		color: #000000;
	}
	.scroll-container {
		height: calc(100vh - 115px);
	}
	
	/* 历史记录 */
	.search-history {
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px;
		margin-top: 36rpx;
		
	}
	.search-history-head {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0rpx;
		line-height: 40rpx;
	}
	.search-history-head text:nth-of-type(1){ font-size: 30rpx;  color: #000000;}
	.search-history-head text:nth-of-type(2){ font-size: 26rpx; color: #aaaaab;}
	.search-history-content { display: flex; flex-wrap: wrap; }
	/* .search-history-content view { height: 24rpx; padding: 20rpx; margin: 14rpx; font-size: 24rpx; line-height: 4rpx; border: 1px solid #f7f6f7; background: #f7f6f7; border-radius: 32rpx;} */
	.search-history-content view { display: flex; flex-wrap: wrap; }
	.search-history-content view  text { font-weight: 300; display: block;  margin: 5px; padding: 5px; background:#f7f6f7; border: 1px solid #f7f6f7; border-radius: 40rpx; font-size: 28rpx;}
	.hot-search {margin-left: 10px; box-sizing: border-box; border: 1px solid #fff;}
	.hot-search-head { font-size: 26rpx; margin-top: 20rpx;}
	.hot-search-item { display: flex; height: 68rpx; line-height: 68rpx; justify-content: space-between;  margin: 20rpx 0;}
	.hot-search-item view:nth-of-type(1){ font-size: 24rpx; color: #fb3b3f; font-weight: 700; margin-left: 10rpx;}
	.hot-search-item view:nth-of-type(2){ font-size: 30rpx; color: #000000; width: 300rpx; text-align: left;  margin-left: -220rpx;}
	.hot-search-item view:nth-of-type(2) text {margin-right: 10rpx; }
	.hot-search-item view:nth-of-type(2) image { width: 30rpx; height: 22rpx;}
	.hot-search-item view:nth-of-type(3){ font-size: 18rpx; color: #c6c5c6; margin-right: 20rpx;}
	
	
	/* 搜索结果页面 */
	.search-result-content { width: 100%; padding: 0 30rpx; box-sizing: border-box; margin-top: 48rpx; }
	.search-result-item { display: flex; justify-content: space-between; height: 120rpx; border-bottom: 1px solid #efefef; }
	
	.search-result-item view:nth-of-type(1) view:nth-of-type(1)  { line-height: 30rpx; font-size: 26rpx; color: #0065a2; margin-top: 30rpx; }
	.search-result-item view:nth-of-type(1) view:nth-of-type(2) {line-height: 40rpx; color: #838483; font-size: 20rpx;} 
	.search-result-item >view:nth-of-type(2){
		width: 50rpx;
		height: 100%;
		line-height: 120rpx;
	}
	.search-result-item >view:nth-of-type(2) .icon-icon_bofang {
		font-size: 50rpx;
		color: #c7c7c8;
	}
	
	/* 搜索预览页面 */
	.curren-search {
		height: 80rpx;
		padding-left: 60rpx;
		font-size: 28rpx;
		color: #005d9e;
		line-height: 120rpx;
	}
	
	.preview-item {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		padding-left: 60rpx;
	}
	.preview-item text:nth-of-type(2) {
		margin-left: 20rpx;
	}
</style>
